import React, {
  Component,
  useState,
  useEffect,
  useRef,
} from "react";
import {
  Text,
  TextInput,
  TouchableHighlight,
  View,
  Image,
  TouchableOpacity,
  Switch,
} from "react-native";

import Content from "../../components/content/content"
import styles from "./user-sheet";

import arrow from "../../asset/images/arrow-right.png";
import avatar from "../../asset/images/avatar.png";

import * as api from "../../api";
import cache from "../../cache";
import * as config from "../../config";

export default function User(props) {
  const [user, setUser] = useState({});
  const [value, setValue] = useState(false);

  const viewMoney = () => {
    jump('ViewMoney');
  };

  const modifyPassword = () => {
    jump('ModifyPassword');
  };

  const bindAccount = () => {
    jump('Account');
  };

  const taskAccount = () => {
    jump('TaskAccount');
  };

  const kefu = () => {
    jump('KeFu');
  };

  const rule = () => {
    jump('BonusRule');
  };

  const jump = (router) => {
    props.navigation.navigate(router);
  };

  const [list, setList] = useState([{
    name: '我的豆子',
    tab: viewMoney,
  }, {
    name: '接单状态',
    tab: null,
  }, {
    name: '任务账号',
    tab: taskAccount,
  }, {
    name: '绑定支付宝',
    tab: bindAccount,
  }, {
    name: '奖励机制',
    tab: rule,
  }, {
    name: '修改密码',
    tab: modifyPassword,
  }, {
    name: '客服',
    tab: kefu,
  }]);

  const getUser = () => {
    global.showLoading();
    api.getUser().then(res => {
      setUser(res);
      setValue(res.task_status ? true : false);
    }).catch(rej => {
      global.showToast(rej);
    }).finally(() => {
      global.closeLoading();
    });
  };

  useEffect(() => {
    getUser();
  }, []);

  loginOut = () => {
    global.showLoading();
    api.loginOut().then(res => {
      cache.delete(config.TOKENKEY);
      props.navigation.replace('Login');
    }).catch(rej => {
      global.showToast(rej);
    }).finally(() => {
      global.closeLoading();
    });
  };

  onValueChange = (value) => {
    setValue(value);
    global.showLoading();
    api.modifyTaskStatus({
      status: value ? 1 : 0,
    }).then(() => {
      global.showToast(value ? '已开启接单' : '已关闭接单');
    }).catch(rej => {
      global.showToast(rej);
      setValue(!value);
    }).finally(() => {
      global.closeLoading();
    });
  }

  rendList = () => {
    return list.map((v, index) => {
      return (
        <TouchableHighlight key={index} underlayColor="#e6e6e6" onPress={v.tab}>
          <View style={styles.middle}>
            <View style={styles.midContent}>
              <View>
                <Text style={styles.name}>{v.name}</Text>
              </View>
              <View>
                {index===1?<Switch value={value} onValueChange={onValueChange} />:
                  <Image source={arrow} style={styles.icon}></Image>
                }
              </View>
            </View>
          </View>
        </TouchableHighlight>
      );
    });
  }

  return (

    <Content>
      <View style={styles.content}>
      	<View style={styles.header}>
        	<View>
        		<Image style={styles.avatar} source={avatar}></Image>
        	</View>
        	<View style={styles.username}>
          	<Text style={styles.usernameText}>用户ID: {user.uid}</Text>
        	</View>
          <View style={styles.username}>
            <Text style={styles.usernameText}>用户名: {user.username}</Text>
          </View>
        </View>
        {
          rendList()
        }
        <View style={[styles.marginTop20, styles.buttonContent]}>
          <TouchableOpacity onPress={loginOut} style={styles.button}>
            <Text style={styles.buttonText}>退出登陆</Text>
          </TouchableOpacity>
        </View>
   		</View>
    </Content>
  )
}